<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="css/style.css">

    <!--font-family: 'Roboto', sans-serif;-->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;400;900&display=swap" rel="stylesheet">

    <title>Content Idea 101</title>

</head>
<body>
    <section class="everything">
        <!--Nav bar-->
        <section class="nav-bar">
            <div class="add-idea">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" >
                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v6m3-3H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg>                  
            </div>
        </section>
        <!-- All ideas -->
        <section class="ideas"></section>
        <!--Add idea page-->
        <section id="page" class="add-idea-page">
            <!--nav bar-->
            <div class="nav-bar">
                <div class="close-page">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M9.75 9.75l4.5 4.5m0-4.5l-4.5 4.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                    </svg>                      
                </div>
            </div>
            <!--Input Section-->
            <form class="input-section">
                <div class="input title">
                    <div class="header">title</div>
                    <input type="text" name="title" id="">
                </div>
                <div class="input genre">
                    <div class="header">genre</div>
                    <input type="text" name="genre" id="">
                </div>
                <div class="input characters">
                    <div class="header">characters</div>
                    <input type="text" name="characters" id="">
                </div>
                <div class="input summary">
                    <div class="header">summary</div>
                    <input type="text" name="summary" id="">
                </div>
                <div class="input script">
                    <div class="header">script</div>
                    <textarea name="script" id="">
                    </textarea>
                </div>
                <button type="submit" class="add-btn">
                    add
                </button>
            </form>
        </section>
        <!--IDea page-->
        <section class="idea-page">
             <!--nav bar-->
             <div class="nav-bar">
                <div class="edit-page-btn">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" >
                        <path stroke-linecap="round" stroke-linejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10" />
                    </svg>                      
                </div>
                <div class="close-page">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M9.75 9.75l4.5 4.5m0-4.5l-4.5 4.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                    </svg>                      
                </div>
                <div class="delete-page-btn">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" />
                    </svg>                      
                </div>
            </div>
            <!--Ideas Content-->
            <div class="idea-title"></div>
            <div class="header">genere:</div>
            <div class="idea-genre"></div>
            <div class="header">characters:</div>
            <div class="idea-characters"></div>
            <div class="header">summary:</div>
            <div class="idea-summary"></div>
            <div class="header">Script:</div>
            <pre class="idea-script"></pre>
            <a class="download">Download.txt</a>
        </section>
        <!--Edit page-->
        <section class="edit-page">
             <!--nav bar-->
             <div class="nav-bar">
                <div class="close-page">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M9.75 9.75l4.5 4.5m0-4.5l-4.5 4.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                    </svg>                      
                </div>
            </div>
            <!--Input Section-->
            <form class="edit-input-section">
                <div class="input title">
                    <div class="header">title</div>
                    <input type="text" name="title" id="">
                </div>
                <div class="input genre">
                    <div class="header">genre</div>
                    <input type="text" name="genre" id="">
                </div>
                <div class="input characters">
                    <div class="header">characters</div>
                    <input type="text" name="characters" id="">
                </div>
                <div class="input summary">
                    <div class="header">summary</div>
                    <input type="text" name="summary" id="">
                </div>
                <div class="input script">
                    <div class="header">script</div>
                    <textarea name="script" id="">
                    </textarea>
                </div>
                <button type="submit" class="add-btn">
                    Edit
                </button>
            </form>
        </section>
    </section>

    <script src="script/page-transfer.js"></script>
    <script src="script/add-idea.js"></script>
    <script src="script/idea-page.js"></script>
    <script src="script/edit-idea.js"></script>
    <script src="script/delete-idea.js"></script>
    <script src="script/download-idea.js"></script>
</body>
</html>